<template>
  <div class="person">
    <h3>personzujian</h3>
    <input type="text" @keyup.enter="addPerson" placeholder="输入人的名字" />
    <ul>
      <li v-for="person in persons" :key="person.id">{{ person.name }}</li>
    </ul>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { nanoid } from "nanoid";
export default {
  name: "PERSON",

  methods: {
    addPerson(event) {
      let { value } = event.target;
      let person = { id: nanoid(), name: value };
      this.$store.dispatch("jianRen", person);
      event.target.value = "";
    },
  },
  computed: {
    ...mapState(["sum", "persons"]),
  },
};
</script>
<style>
</style>